<template>
  <!-- 购物车 -->
  <view class="buy-car-container">
    <!-- 顶部部分 -->
    <view class="header-box flex flex-jc-sb">
      <!-- 商品数量 -->
      <view class="sum-amount">共{{ goodsTotal }}件商品</view>

      <view class="btn-manage" @click="editStatus = !editStatus">{{
        editStatus ? '完成' : '管理'
      }}</view>
    </view>

    <!-- 数据空时的默认图 -->
    <view v-if="buyCarList.length === 0" class="is-empty">
      <default-img msg="购物车竟然空空如也"></default-img>
      <view style="text-align: center;" class="mt-20">
        <u-tag
          text="去逛逛吧"
          shape="circle"
          mode="light"
          color="#999"
          border-color="#999"
          bg-color="#f1f1f1"
          @click="goHomePage()"
        ></u-tag>
      </view>
    </view>

    <!-- 商品内容 -->
    <view v-else class="main">
      <view
        v-for="(item, index) in buyCarList"
        :key="item.store_id"
        class="goods-card"
      >
        <!-- 店铺名称 -->
        <view class="store-box flex flex-ai-c">
          <view @click="checkedStore(item)" class="font-0">
            <i-icon
              v-show="!item.checked"
              icon="icontuoyuan"
              size="40rpx"
              color="#999"
            ></i-icon>
            <i-icon
              v-show="item.checked"
              icon="icongouxuan"
              type="m"
              size="40rpx"
            ></i-icon>
          </view>
          <text class="ml-20 mr-10">{{ item.store_name }}</text>
          <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
        </view>

        <!-- 商品部分 -->
        <view class="goods-box">
          <view
            v-for="(goods, i) in item.shoppingTrolleyList"
            :key="goods.shopping_trolley_id"
            class="goods-item flex flex-ai-c"
          >
            <!-- 勾选勾 -->
            <view class="icon-yuan mr-20" @click="checkedGoods(goods, item)">
              <i-icon
                v-show="!goods.checked"
                icon="icontuoyuan"
                size="40rpx"
                color="#999"
              ></i-icon>
              <i-icon
                v-show="goods.checked"
                icon="icongouxuan"
                type="m"
                size="40rpx"
              ></i-icon>
            </view>

            <!-- 商品内容 -->
            <view class="content flex" @click="goGoodsDetailPage(goods)">
              <view class="img">
                <image :src="goods.picture_path" mode="widthFix"></image>
              </view>

              <view class="right-cont ml-20">
                <view class="font-30 color-333 m-line-text-2">{{
                  goods.goods_name
                }}</view>
                <view class="flex flex-jc-sb mt-20">
                  <text class="font-26 color-666">运费</text>
                  <text class="font-26 color-EB5C02"
                    >￥{{ goods.freight }}</text
                  >
                </view>
                <view class="flex flex-jc-sb mt-20">
                  <text class="font-36 color-EB5C02 font-bold"
                    >￥{{ goods.b_price }}</text
                  >
                  <u-number-box
                    v-model="goods.count"
                    :index="goods.shopping_trolley_id"
                    :min="1"
                    input-width="60"
                    input-height="44"
                    size="28"
                    :longPress="false"
                    bg-color="#fff"
                    @change="goodsCountChange"
                  ></u-number-box>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部固定栏 -->
    <view class="footer-bar flex flex-jc-sb flex-ai-c">
      <label @click="$u.throttle(checkedAll, 500)">
        <view class="left flex flex-ai-c">
          <i-icon
            v-show="!checkedAllStatus"
            icon="icontuoyuan"
            size="40rpx"
            color="#999"
          ></i-icon>
          <i-icon
            v-show="checkedAllStatus"
            icon="icongouxuan"
            type="m"
            size="40rpx"
          ></i-icon>
          <text class="ml-10">全选</text>
        </view>
      </label>

      <view class="right flex flex-ai-c">
        <view v-show="!editStatus">
          <text class="font-30 color-666">优惠合计：</text>
          <text class="color-EB5C02 font-bold font-30">￥{{ priceTotal }}</text>
        </view>
        <view class="btn" @click="$u.throttle(submit, 500)">
          {{ editStatus ? '删除' : `结算 (${settlementAmount})` }}
        </view>
      </view>
    </view>
  </view>
</template>

<script src="./buyCar.js"></script>

<style lang="scss" scoped>
@import './buyCar.scss';
</style>
